<template>
    <div>
        <a-form-model layout="inline" ref="logSearchRef" :model="loginLogSearchModel">
            <a-form-model-item label="账号" prop="account">
                <a-input allowClear v-model="loginLogSearchModel.account"></a-input>
            </a-form-model-item>
            <a-form-model-item label="起止日期">
                <a-range-picker
                        valueFormat="YYYY-MM-DD HH:mm:ss"
                        :value="[loginLogSearchModel.startDate,loginLogSearchModel.endDate]"
                        :locale="locale"  :show-time="{ format: 'HH:mm:ss' }"
                        format="YYYY-MM-DD HH:mm:ss"
                        :placeholder="['Start Time', 'End Time']"
                        @change="onChange"
                        @ok="onOk"/>
            </a-form-model-item>

            <a-form-model-item>
                <a-button type="primary" @click="searchBtn()">查询</a-button>
            </a-form-model-item>
            <a-form-model-item>
                <a-button @click="reSearchBtn()">重置</a-button>
            </a-form-model-item>
        </a-form-model>

        <a-card>

            <vxe-table   border
                         stripe
                         resizable
                         highlight-hover-row
                         :loading="loading"
                         :data="tableData"
                         :auto-resize="true">
                <vxe-table-column type="seq" width="60"></vxe-table-column>
                <vxe-table-column  field="id" title="日志Id" width="100"></vxe-table-column>
                <vxe-table-column field="account" title="账号" ></vxe-table-column>
                <vxe-table-column field="pubIp" title="请求IP" ></vxe-table-column>
                <vxe-table-column field="reqLocation" title="地理位置" ></vxe-table-column>

                <vxe-table-column field="reqToken" title="请求token" ></vxe-table-column>

                <vxe-table-column field="deviceType" title="设备类型" ></vxe-table-column>
                <vxe-table-column field="deviceSystem" title="操作系统" ></vxe-table-column>
                <vxe-table-column field="browserName" title="浏览器类型" ></vxe-table-column>

                <vxe-table-column field="addTime" title="添加时间" show-overflow></vxe-table-column>
                <vxe-table-column title="操作" width="260" show-overflow>
                    <template v-slot="{ row }">
                        <a-button :size="'small'" type="danger" @click="forceLogout(row)">
                            <a-icon type="delete"/>
                            强制下线
                        </a-button>
                    </template>
                </vxe-table-column>
            </vxe-table>
            <vxe-pager
                    background
                    size="small"
                    :loading="loading"
                    :current-page="tablePage.currentPage"
                    :page-size="tablePage.pageSize"
                    :total="tablePage.totalResult"
                    :page-sizes="[10, 20, 100]"
                    :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']"
                    @page-change="handleNextPageChange">
            </vxe-pager>
        </a-card>

    </div>
</template>

<script>
    import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';
    export default {
        name: "LoginLog",
        data() {
            return {
                locale,
                loading: false,
                tableData: [],
                tablePage: {
                    currentPage: 1,
                    pageSize: 10,
                    totalResult: 0
                },
                loginLogSearchModel:{
                    account:undefined,
                    startDate:null,
                    endDate:null
                }
            }
        },
        mounted() {
            this.searchBtn();
        },
        methods: {
            forceLogout(row){
                console.log(row);
                this.$reqGlobal.delete('/lte/forceLogout', {params: row}).then(res => {
                    if (res.data.code === 0) {
                        this.reSearchBtn();
                    } else {
                        this.$message.error("强制下线失败!");
                    }
                });

            },

            onChange(date, dateString) {
                console.log(date);
                console.log( dateString);
                let arr = [];
                arr = dateString;
                this.loginLogSearchModel.startDate = arr[0];
                this.loginLogSearchModel.endDate = arr[1];
            },
            onOk(value) {
                console.log('onOk: ', value);
                let arr = [];
                arr = value;
                this.loginLogSearchModel.startDate = arr[0];
                this.loginLogSearchModel.endDate = arr[1];
            },



            searchBtn(){
                this.tablePage.currentPage = 1;
                let req = JSON.parse(JSON.stringify(this.loginLogSearchModel))
                req.pageNo = this.tablePage.currentPage - 1;
                req.pageSize = this.tablePage.pageSize;
                this.execReqLogPage(req);
            },
            reSearchBtn(){
                this.$refs.logSearchRef.resetFields(); //使用前需要在 form-item上加注prop属性
                this.loginLogSearchModel.startDate =null;
                this.loginLogSearchModel.endDate =null;
                this.searchBtn();
            },
            handleNextPageChange({currentPage, pageSize}) {
                this.tablePage.currentPage = currentPage
                this.tablePage.pageSize = pageSize;
                let req = JSON.parse(JSON.stringify(this.loginLogSearchModel))
                req.pageNo = this.tablePage.currentPage - 1;
                req.pageSize = this.tablePage.pageSize;
                this.execReqLogPage(req);
            },

            execReqLogPage(req) {
                this.loading = true;
                this.$reqGlobal.get('/lte/loginLogPage', {params: req}).then(res => {
                    this.loading = false;
                    if (res.data.code === 0) {
                        this.tableData = res.data.data.content;
                        this.tablePage.totalResult = res.data.data.totalElements;
                    } else {
                        this.tableData = [];
                        this.tablePage.totalResult = 0;
                        this.$message.error("查询操作日志失败!");
                    }
                });
            }
        }
    }
</script>

<style scoped>

</style>
